<template>
  <div>
     <!-- <p> This is index </p> -->
     <div class="index-wrap">
         <div class="index-left">
             <div class="index-left-block">
             <h2>全部产品</h2>
             <template v-for="product in productList">
                <h3>{{product.title}}</h3>
                <ul>
                    <li v-for="item in product.list">
                    <a :href="item.url">{{item.name}}</a>
                    <span v-if="item.hot" class="hot-tag">HOT</span> 
                    </li>
                </ul>
                  <div v-if="!product.last" class="hr"></div>
             </template>
             
             </div>
             <div class="index-left-block lastest-news">
             <h2>最新消息</h2>
                <ul>
                    <li v-for="(item,key) in newsList" :key="index" >
                        <a :href="item.url" class="new-item">{{item.title}}</a>
                    </li>
                </ul>
             </div>
         </div>
         <div class="index-right">

         </div>

        <slide-show :slides="slides" :inv="slideSpeed"
            @onChange="doSomethingOnSliderChange"></slide-show>

        <div class="index-board-list">
                <div class="index-board-item"
                v-for="(item,index) in boardList"
                :class="[{'line-last' : index % 2 !=0},
                    'index-board-'+item.id]" :key="index" >
                    <div class="index-board-item-inner">
                        <h2>{{item.title}}</h2>
                        <p>{{item.description}}</p>
                            <div class="index-board-button">
                                    <a :href="item.toKey" class="button">
                                    立即购买</a>
                                    </div>
                            </div>
                    </div>
                </div>
        </div>
        </div>
     </div>
  </div>
</template>

<script>
import slideShow from '../components/slideShow'
export default {
    components:{
      slideShow
    },
    methods:{
        doSomethingOnSliderChange(index){
          //console.log("Slider show run: "+index)
        }
    },
    created: function(){
        this.$http.get('api/getNewsList')
        .then((res) => {
            console.log(res.data);
            this.newsList = res.data
        },(err)=>{
            console.log(err);
        })

         this.$http.get('api/getBoardList')
        .then((res) => {
            console.log(res.data);
            this.boardList = res.data
        },(err)=>{
            console.log(err);
        })

        this.$http.get('api/getProductsList')
        .then((res) => {
            console.log(res.data);
            this.productList = res.data
        },(err)=>{
            console.log(err);
        })

        this.$http.get('api/getSlides')
        .then((res) => {
            console.log(res.data);
            this.slides = res.data
        },(err)=>{
            console.log(err);
        })
    },
    data(){
        return{
            slideSpeed:3000,
            boardList: [],
            newsList:[],
            productList:[],
            slides:[]
            
        }
    }
}
</script>

<style scoped>
.index-wrap {
  width: 1200px;
  margin: 0 auto;
  overflow: hidden;
}
.index-left {
  float: left;
  width: 300px;
  text-align: left;
}
.index-right {
  float: left;
  width: 900px;
}
.index-left-block {
  margin: 15px;
  background: #fff;
  box-shadow: 0 0 1px #ddd;
  border-bottom-left-radius:5px;
  border-bottom-right-radius:5px;
}
.index-left-block .hr {
  margin-bottom: 20px;
}
.index-left-block h2 {
  background: #1E90FF;
  color: #fff;
  padding: 10px 15px;
  margin-bottom: 20px;
  border-top-left-radius:5px;
  border-top-right-radius:5px;

}
.index-left-block h3 {
  padding: 0 15px 5px 15px;
  font-weight: bold;
  color: #222;
}
.index-left-block ul {
  padding: 10px 15px;
}
.index-left-block li {
  padding: 5px;
}
.index-board-list {
  overflow: hidden;
  margin-top:22px;
}
.index-board-item {
  float: left;
  width: 400px;
  background: #fff;
  box-shadow: 0 0 1px #ddd;
  padding: 20px;
  margin-right: 20px;
  margin-bottom: 20px;
  border-top-left-radius:5px;
  border-top-right-radius:5px;
  border-bottom-left-radius:5px;
  border-bottom-right-radius:5px;
}
.index-board-item-inner {
  min-height: 125px;
  padding-left: 120px;
}
.index-board-car .index-board-item-inner{
  background: url(../assets/images/1.png) no-repeat;
}
.index-board-loud .index-board-item-inner{
  background: url(../assets/images/2.png) no-repeat;
}
.index-board-earth .index-board-item-inner{
  background: url(../assets/images/3.png) no-repeat;
}
.index-board-hill .index-board-item-inner{
  background: url(../assets/images/4.png) no-repeat;
}
.index-board-item h2 {
  font-size: 18px;
  font-weight: bold;
  color: #000;
  margin-bottom: 15px;
}
.line-last {
  margin-right: 0;
}
.index-board-button {
  margin-top: 20px;
}
.lastest-news {
  min-height: 512px;
}
.hot-tag {
  background: red;
  color: #fff;
  font-size: xx-small;
  border-radius:4px;
  margin: 4px;
  padding: 3px;
}
.new-item {
  display: inline-block;
  width: 230px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
